 
<html>
<head>
<meta charset="utf-8">
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<style type="text/css">
	.MapMonitorImg{
		width: 20px;
		height: 20px;
		background-image: url("images/gpsicon/location24.png");
		background-repeat:no-repeat;
		background-size:20px 20px;
	}
	.AlarmImg{
		width: 24px;
		height: 24px;
		background-image: url("images/gpsicon/alarm.png");
		background-repeat:no-repeat;
		background-size:20px 20px;
	}
	
	.navimg{
		width: 24px;
		height: 24px;
	}
	
	.MapHistoryImg{
		width: 20px;
		height: 20px;
		background-image: url("images/gpsicon/historyline24.png");
		background-repeat:no-repeat;
		background-size:20px 20px;
	}
	.HistoryVideoImg{
		width: 20px;
		height: 20px;
		background-image: url("images/gpsicon/video.png");
		background-repeat:no-repeat;
		background-size:20px 20px;
	}
	
	.bgtitle{
		background-image: url("images/layout-browser-hd-bg.png");
		background-repeat: repeat;
		color: white;
	}
	
	.bg2{
		background-image: url("images/bg2.png");
		filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";  
		-moz-background-size:100% 100%;  
		    background-size:100% 100%; 
	}
	
	.bglogo{
		background-image: url("images/logobg.png");
		filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";  
		-moz-background-size:100% 100%;  
		    background-size:100% 100%; 
	}
	.bg2 .layui-nav-item a{
		color: #000000;
	}
	
	.titlelogo{
		color: black;
		font-size: larger;
		font-weight: bold;
	}
</style>
</head>
<body class="layui-layout-body" style="min-width: 1000px;">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header bg2" style="display: flex; min-width: 850px;">
	
    <div class="layui-logo">
		<ul class="layui-nav layui-menu">
		  <li class="layui-nav-item " lay-unselect="">
			  <label datalang="SysTitle" class="titlelogo">&nbsp;</label>
		  </li>
		</ul>
		
	</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left" style="display: block;">
      <li class="layui-nav-item layui-this"><a href="javascript:OpenIfForm(1);"><img src="images/gpsicon/location24.png" class="navimg"><label datalang="Map">&nbsp;</label></a></li>
      <li class="layui-nav-item"><a href="javascript:OpenIfForm(2);"><img src="images/gpsicon/historyline24.png" class="navimg"><label datalang="Track">&nbsp;</label></a></li>
      <li class="layui-nav-item"><a href="javascript:;"><img src="images/gpsicon/video.png" class="navimg"><label datalang="HistoryVideo">&nbsp;</label></a></li>
      <li class="layui-nav-item"><a href="javascript:;"><img src="images/gpsicon/chart.png" class="navimg"><label datalang="Report">&nbsp;</label></a></li>
      <li class="layui-nav-item"><a href="javascript:;"><img src="images/gpsicon/mng.png" class="navimg"><label datalang="DataManagement">&nbsp;</label></a></li>
      <!-- <li class="layui-nav-item">
        <a href="javascript:;">其它系统</a>
        <dl class="layui-nav-child">
          <dd><a href="">邮件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">授权管理</a></dd>
        </dl>
      </li> -->
    </ul>
    <ul class="layui-nav layui-layout-right">
	  <li class="layui-nav-item">
		  <a href="javascript:;">
			<img src="images/gpsicon/alarm2.png" class="navimg">
			<!-- <span class="AlarmImg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> -->
		    <label id="alarmCount" class="layui-badge" style="margin: -8px -8px 0; top: 20%;">0</label>
			&nbsp;
		  </a>
	  </li>
      <li class="layui-nav-item">		
        <a href="javascript:;">
          <img src="images/gpsicon/userlogin.png" class="navimg"><!-- layui-nav-img -->
          <label id="loginUser">&nbsp;&nbsp;</label>
        </a>
        <dl class="layui-nav-child">
          <!-- <dd><a href="">基本资料</a></dd> -->
          <dd><a href="javascript:Exit();"><label datalang="ExitLogin"></label></a></dd>
        </dl>
      </li>
    </ul>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © 底部固定区域
  </div>
  <div id="divLeftBody" style="overflow: hidden; width: 350px;" class="layui-side layui-bg-black layui-sidehasbottom">
    <div class="layui-side-scroll" style="background-color: #DDDADA; color: #000000; width: 350px;"><!-- F2F2F2 -->
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
	  <div style="width: 100%; height: 25px; padding-left: 10px; padding-top: 3px;">
		  <button type="button" onclick="SearchAll()" class="layui-btn layui-btn-xs layui-btn-warm" datalang="All"></button>
		  <button type="button" onclick="SearchOnline()" class="layui-btn layui-btn-xs layui-btn-normal" datalang="Online"></button>
		  <button type="button" onclick="SearchAlarm()" class="layui-btn layui-btn-xs layui-btn-danger" datalang="Alarm"></button>
		  <button type="button" onclick="SearchOffline()" class="layui-btn layui-btn-xs layui-btn-primary" datalang="Offline"></button>
	  </div>
	  <div style="width: 100%; height: 30px; padding-left: 1px;">
		      <div class="layui-input-block2" id="findTreeVehs" name="single_select">
		          <div class="layui-form-select" style="width: 99%">
		              <div class="layui-select-title">
		                  <input type="text" class="layui-input" attrlang="placeholder,SearchFilter" placeholder=""
		                         name="select_input" id="select_input" autocomplete="off" id="">
		                  <i class="layui-edge"></i>
		              </div>
		              <dl name="select_show" class="layui-anim layui-anim-upbit">
		                  <dd lay-value="" class="layui-select-tips" style="text-align: center">
		                      <i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
		                  </dd>
		              </dl>
		          </div>
		      </div>
	  </div>
	  <div style="width: 100%; position: absolute; bottom: 0px; top: 65px;">
		  <div id="ttOnline" class="scrollview" style="width: 99%; "></div>
	  </div>
    </div>
	<div id="divLeftSlide" style="width: 5px; float: right; position: absolute; height: 100%; top: 0; right: 0; background:#000; color:#FFF;opacity:0; z-index: 999; cursor: col-resize;">
		<div id="divLeftSlideLine" style="width: 32px; height: 32px; top: 48%; margin-left: -16px; position: fixed; background-image: url('images/angleleft.png');background-repeat:no-repeat; cursor: pointer;">
			
		</div>
	</div>
  </div>
  
  <div id="divCenterBody" class="layui-body" style="left: 350px;">
    <!-- 内容主体区域 -->
    <div id="divMaps" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden;">
		<div id="maptool" style="height: 30px;">
			<ul class="layui-nav layui-bg-blue btnz" lay-filter="" style="font-size: 12px;border-radius: 0px;float: left;padding:0px 0px 0px 0px;margin-left: 0px;">
			    <li class="layui-nav-item" style="line-height: 30px;font-size: 12px;">
			        <a href="javascript:;" style="color:white;font-size: 12px;padding: 0px 30px 0px 20px;"><label datalang="Map"></label><span class="layui-nav-more" style="right: 10px;font-size: 12px;"></span></a>
			        <dl class="layui-nav-child" style="top: 30px;line-height: 31px;padding: 0px 0px 0px 0px;"> <!-- 二级菜单 -->
			            <dd><button class="layui-btn layui-btn layui-btn-sm layui-btn-fluid" id="btn_BaiduMap" onclick="ChangeMapClick(1)" datalang="BaiduMap"></button></dd>
			            <dd><button class="layui-btn layui-btn layui-btn-sm layui-btn-fluid" id="btn_GoogleMap" onclick="ChangeMapClick(2)" datalang="GoogleMap"></button></dd>
			        </dl>
			    </li>
			</ul>
			<ul class="layui-nav layui-bg-blue btnz" lay-filter="" style="font-size: 12px;border-radius: 0px;float: left;padding:0px 0px 0px 0px;margin-left: 1px;">
			    <li class="layui-nav-item" style="line-height: 30px;font-size: 12px;">
			        <a href="javascript:;" style="color:white;font-size: 12px;padding: 0px 30px 0px 20px;">更多<span class="layui-nav-more" style="right: 10px;font-size: 12px;"></span></a>
			        <dl class="layui-nav-child" style="top: 30px;line-height: 31px;padding: 0px 0px 0px 0px;"> <!-- 二级菜单 -->
			            <dd><button class="layui-btn layui-btn layui-btn-sm layui-btn-fluid" id="btn_cjb">创建表</button></dd>
			            <dd><button class="layui-btn layui-btn layui-btn-sm layui-btn-fluid" id="btn_cjb">修改表</button></dd>
			            <dd><button class="layui-btn layui-btn layui-btn-sm layui-btn-fluid" id="btn_fzb">复制表</button></dd>
			            <dd><button class="layui-btn layui-btn layui-btn-sm layui-btn-fluid" id="btn_xgb">导出表</button></dd>
			        </dl>
			    </li>
			</ul>

		</div>
		<div style="position: absolute; left: 0; right: 0; top: 30px; bottom: 0; overflow: hidden;">
			<iframe id="ifMaps" width="100%" height="100%" src=""></iframe>
		</div>
	</div>
    <div id="divHistoryMaps" style="width: 100%; height: 100%; position: absolute; overflow: hidden; left: 0; top: 0; display: none;">
		<iframe id="ifHistoryMaps" width="100%" height="100%" src=""></iframe>
	</div>
    <div id="report" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: none;">
		33
	</div>
  </div>
  
</div>
<script src="layui/layui.js"></script>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/BigData/loadjs.js?v=1"></script>
<script type="text/javascript">
	function Exit(){
		var state = app.getState();
		sGlobalToken = state.token = "";
		sGlobalPwd = state.pwd = "";
		sGlobalUserName = state.account = "";
		state.rememberuser = false;
		app.setState(state);
		location.href = "login.html";
	}
	
	function OpenIfForm(iType){
		$('#divMaps').hide();
		$('#divHistoryMaps').hide();
		switch(iType){
			case 1:
				$('#divMaps').show();
				setTimeout(function(){
					AddGpsToMap();
				},1000);
				break;
			case 2:
				$('#divHistoryMaps').show();
				if($('#ifHistoryMaps')[0].src.indexOf("GoogleHistoryMap.html") == -1 && $('#ifHistoryMaps')[0].src.indexOf("BaiduHistoryMap.html") == -1){
					if(globalSettings["map"] == "Google"){
						$('#ifHistoryMaps')[0].src = "GoogleHistoryMap.html";
					}
					else{
						$('#ifHistoryMaps')[0].src = "BaiduHistoryMap.html";
					}					
				}
				break;
		}
	}
	
	var bDocumentComplete = false;
	document.onreadystatechange = function()			
	{ 	
	　　 if(document.readyState == "complete")
	　　 { 
			bDocumentComplete = true;
	   　}
	}
	var timeVersion = (new Date()).getTime();
	loadScript([{
		"path": "js/index.js?t=" + timeVersion,
		"type": "js"
	}], LoadMainJs);
	
	function LoadMainJs(){
		LoadMain();
	}
	
	function jsCallback() {
		LoadBigTableJs(
			function(){
				var loadFun = function(){
					//$('#divVehs').show();
					if (globalSettings["lang"] == "Zh") {
						arrLang = arrLanZHCN;
					} else {
						arrLang = arrLanEn;
					}
					document.title = arrLang.SysTitle;
					SetCancelAlarm();
					ChangeLan("body", arrLang);	
					$('#historySpeed').next().find('span').text(arrLang.Speed);
					$('#historyLocation').next().find('span').text(arrLang.Location);
					var settings = app.getSettings();
					var appServer = app.getAppIpPort();
					var state = app.getState();
					sGlobalToken = state.token;
					sGlobalPwd = state.pwd;
					sGlobalUserName = state.account;
					$('#loginUser').text(sGlobalUserName);
					sGlobalUserType = state.usertype;
					if(sGlobalToken == undefined || sGlobalPwd == undefined || sGlobalUserName == undefined || sGlobalUserType == undefined){
						location.href = "login.html";
						return;
					}
					GetAllData();
					setInterval(function() {
						GetLastPositionApiInterval();
					}, 10000);
					GetLastPositionFromApi();
					setTimeout(function() {
						iLastPositionInterval = iLastPositionInterval + 1;
						if (iLastPositionInterval > 9999999999) {
							iLastPositionInterval = 0;
						}
					}, 1000);
					if(globalSettings["map"] == "Google"){
						$('#ifMaps')[0].src = "GoogleMap.html";
					}
					else{
						$('#ifMaps')[0].src = "BaiduMap.html";
					}
					//$('.MapHistoryImg').on()
				};
				if(bDocumentComplete){
					loadFun();
				}
				else{
					$(document).ready(function() {  
						loadFun();
					});
				}
			}
		);
	}
</script>
<script>
//JavaScript代码区域
layui.use(['layer','form', 'element','laydate'], function(){
  var element = layui.element;
  var form = layui.form;
  var laydate = layui.laydate;
  var dtNow = (new Date());
  var sStartTime = formatterSearch(dtNow,"00:00:01");
  var sEndTime = formatterSearch(dtNow,"23:59:59");
   laydate.render({
      elem: '#historyTime'
      ,type: 'datetime'
      ,range: true
	  ,max: 1
	  ,value: sStartTime + " - " + sEndTime
    });
});


layui.use('jquery',function(){
    var $ = layui.jquery;
    var width = $(window).width();
    $(document).ready(function() { 
		$.fn.extend({		
		    lzhDrag: function (obj) {
		        let max_left = $(this).offsetParent().outerWidth() - $(this).outerWidth(),
		            max_top = $(this).offsetParent().outerHeight() - $(this).outerHeight();
				if(obj.max_left != undefined){
					max_left = obj.max_left;
					if(obj.max_left.indexOf("max") > - 1){
						if(obj.max_left == "max"){
							max_left = $(window).width();
						}
						else{
							var imax_left = obj.max_left.replace("max-","");
							max_left = $(window).width() - parseInt(imax_left);
						}
					}
				}
		        $(this).on('mousedown', event => {
					if(obj.max_left != undefined){
						max_left = obj.max_left;
						if(obj.max_left.indexOf("max") > - 1){
							if(obj.max_left == "max"){
								max_left = $(window).width();
							}
							else{
								var imax_left = obj.max_left.replace("max-","");
								max_left = $(window).width() - parseInt(imax_left);
							}
						}
					}
		            let ele_x = event.offsetX,
		                ele_y = event.offsetY;
		            obj.startDown && obj.startDown();
		            $(document).on('mousemove', e => {
		                obj.startMove && obj.startMove();
		                e.preventDefault();
		                let left = e.clientX - ele_x,
		                    top = e.clientY - ele_y;
		                left = left < 0 ? 0 : left;
		                top = top < 0 ? 0 : top;
		                left = left > max_left ? max_left : left;
		                top = top > max_top ? max_top : top;
		                $(this).css({
		                    left, top
		                })
						iSlideLeftFirst = left;
		            })
		        })
		        $(document).on('mouseup', () => {
		            $(document).off('mousemove');
		            obj.overMove && obj.overMove();
		        })
		        return this;
		    }
		});
		var iSlideLeftFirst = $('#divLeftSlide').position().left;
		$('#divLeftSlide').lzhDrag({
			max_left: "max-500",
			startDown: function () {
			    console.log("down");
			},
			startMove: function (e) {
				$("#divLeftBody").css({width: ($('#divLeftSlide').position().left + $('#divLeftSlide').width()) + "px" });
				$("#divLeftBody").find(".layui-side-scroll").css({width: ($('#divLeftSlide').position().left + $('#divLeftSlide').width()) + "px" });
				//$("#divLeftBody").find(".layui-nav-item").css({width: ($('#divLeftSlide').position().left + $('#divLeftSlide').width()) + "px" });
				$("#divCenterBody").css({left: ($('#divLeftSlide').position().left + $('#divLeftSlide').width()) });
			},
			overMove: function () {
			    console.log("move");
			}
		});
		$('#divLeftSlideLine').click(function(){
			if($(this).css("background-image").indexOf("angleleft") > -1){
				$(this).css({"background-image": "url(images/angleright.png)"});
				$("#divLeftBody").css({width: "5px" });
				$("#divLeftBody").find(".layui-side-scroll").css({width: "5px" });
				//$("#divLeftBody").find(".layui-nav-item").css({width: "8px" });
				$("#divCenterBody").css({left: "5px" });
				$('#divLeftSlide').css({left: "0px" });
			}
			else{
				if(iSlideLeftFirst < 200){
					iSlideLeftFirst = 200;
				}
				$(this).css({"background-image": "url(images/angleleft.png)"});
				$("#divLeftBody").css({width: (iSlideLeftFirst + 5) + "px" });
				$("#divLeftBody").find(".layui-side-scroll").css({width: (iSlideLeftFirst + $('#divLeftSlide').width()) + "px" });
				//$("#divLeftBody").find(".layui-nav-item").css({width: (iSlideLeftFirst + $('#divLeftSlide').width()) + "px" });
				$("#divCenterBody").css({left: (iSlideLeftFirst + $('#divLeftSlide').width()) });
				$('#divLeftSlide').css({left: iSlideLeftFirst + "px" });
			}
		});
		var bLeftSlideOnClick = false;
		$('#divLeftSlide').mouseover(function(){
			$('#divLeftSlide').css({ opacity: 1 }); 
		});
		$('#divLeftSlide').mouseout(function(){
			$('#divLeftSlide').css({ opacity: 0 }); 
			//bLeftSlideOnClick = false;
		});
		/* $('#divLeftSlide').mousedown(function(){
			bLeftSlideOnClick = true;
		});
		$('#divLeftSlide').mouseup(function(){
			bLeftSlideOnClick = false;
		}); */
		/* $('#divLeftSlide').mousemove(function(e){
			if(bLeftSlideOnClick && e.clientX > 3){
				$("#divLeftBody").css({width: e.clientX + "px" });
				$("#divCenterBody").css({left: e.clientX });
			}
		}); */
	});
})
</script>
</body>
</html>
